<template>
  <div class="app-container">
    <el-drawer :wrapperClosable="false" :close-on-press-escape="false" :title="title" @closed="operateClose"
      :visible.sync="open" size="65%" append-to-body>
      <el-form v-loading="loading" ref="form" :model="form" :rules="rules" label-width="120px" class="form">
        <el-row v-if="type === 1 || user.deptId < 101">
          <el-col :span="8">
            <el-form-item :label="type === 1 ? '代理' : '代运营'" prop="agentIds">
              <el-select filterable remote reserve-keyword :remote-method="agentRemoteMethod"
                @change="handleAgentChange" :loading="agentLoading" v-model="form.agentIds"
                :placeholder="type === 1 ? '请输入代理账号或昵称' : '请输入代运营账号或昵称'" clearable style="width: 240px">
                <el-option v-for="item in agentList" :key="item.id" :label="item.nickName + '(' + item.userName + ')'"
                  :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :label="type === 1 ? '代理简称名称' : '代运营简称名称'" prop="shortName" :rules="[
              { required: true, message: type === 1 ? '请输入代理简称名称' : '请输入代运营简称名称', trigger: 'blur' }
            ]">
              <name-input v-model="form.shortName" :maxlength="20"
                :placeholder="type === 1 ? '请输入代理简称名称' : '请输入代运营简称名称'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type === 2">
          <el-col :span="8">
            <el-form-item label="店铺账户" prop="shopId">
              <el-select @change="$forceUpdate()" filterable v-model="form.shopId" placeholder="请选择店铺账户" clearable
                style="width: 240px">
                <el-option v-for="item in shopList" :key="item.id" :label="item.nickName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="抽佣费率" prop="feeRate"
              :rules="[{ type: 'number', min: 1, required: true, message: '请输入1-30之间的抽佣费率', trigger: 'blur' }]">
              <el-input-number :step="1" :min="0" :max="30" :precision="2" v-model="form.feeRate"
                placeholder="请输入抽佣费率" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">资质信息</el-divider>

        <el-form-item label="商户类型" prop="signType">
          <el-select v-model="form.signType" placeholder="请选择商户类型" clearable style="width: 240px">
            <el-option v-if="type === 1" label="企业" value="ENTERPRISE" />
            <el-option label="个体户" value="INDIVIDUAL" />
          </el-select>
        </el-form-item>

        <el-row>
          <el-col :span="8">
            <el-form-item label="营业执照" prop="licenceImg">
              <YeePayFileUpload @input="handUploadImg" keys="licenceUrl" :path="form.licenceUrl" :file-size="4"
                :limit="1" v-model="form.licenceImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="公司全称" prop="signName">
              <name-input v-model="form.signName" :maxlength="80" placeholder="请输入营业执照全称" />
            </el-form-item>
          </el-col>
          <el-col :span="7">
            <el-form-item label="社会统一信用代码" prop="licenceNo" label-width="140px">
              <code-input v-model="form.licenceNo" :maxlength="20" placeholder="请输入社会统一信用代码" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="业务分类" prop="primaryIndustryCategory">
              <el-cascader @change="industryCategoryInfo" v-model="industry" clearable :options="industryList"
                :props="{ label: 'name', value: 'code' }" style="width: 100%;"></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="经营地址" prop="province">
              <el-cascader @change="businessAddressInfo" v-model="province" clearable :options="cityList"
                :props="{ label: 'name', value: 'code' }" style="width: 100%;"></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="经营详情地址" label-width="130px" prop="address">
              <el-input v-model="form.address" :maxlength="23" placeholder="请输入经营详细地址	" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider content-position="left">银行信息</el-divider>
        <el-form-item :label="form.signType === 'ENTERPRISE' ? '开户许可证' : '银行卡'" prop="openAccountLicenceImg">
          <YeePayFileUpload @input="handUploadImg" keys="openAccountLicenceUrl" :file-size="4"
            :path="form.openAccountLicenceUrl" :limit="1" v-model="form.openAccountLicenceImg"></YeePayFileUpload>
        </el-form-item>
        <el-form-item label="结算类型" prop="bankAccountType">
          <el-select v-model="form.bankAccountType" placeholder="请选择结算类型" clearable style="width: 100%">
            <el-option label="对公" v-if="form.signType === 'ENTERPRISE'" value="ENTERPRISE_ACCOUNT" />
            <el-option label="对私" value="DEBIT_CARD" />
          </el-select>
        </el-form-item>
        <el-row>
          <el-col :span="8">
            <el-form-item label="银行名称" prop="bankCode">
              <el-select filterable remote v-model="form.bankCode" clearable placeholder="请输入银行名称"
                :remote-method="remoteMethod" :loading="bankNameLoading" style="width: 100%;">
                <el-option v-for="item in bankList" :key="item.code" :label="item.name" :value="item.code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="15">
            <el-form-item label="银行账户号码" prop="bankCardNo">
              <code-input v-model="form.bankCardNo" placeholder="请输入银行账户号码" />
            </el-form-item>
          </el-col>
        </el-row>


        <el-divider content-position="left">法人信息</el-divider>

        <el-row>
          <el-col :span="8">
            <el-form-item label="身份证件正面（人像面）" prop="legalLicenceFrontImg">
              <YeePayFileUpload @input="handUploadImg" keys="legalLicenceFrontUrl" :file-size="5"
                :path="form.legalLicenceFrontUrl" :limit="1" v-model="form.legalLicenceFrontImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证件反面（国徽面）" prop="legalLicenceBackImg">
              <YeePayFileUpload @input="handUploadImg" keys="legalLicenceBackUrl" :file-size="5"
                :path="form.legalLicenceBackUrl" :limit="1" v-model="form.legalLicenceBackImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row v-if="type === 1">
          <el-col :span="8">
            <el-form-item label="付款业务协议" prop="agreementPhotoImg">
              <YeePayFileUpload @input="handUploadImg" type="pdf" keys="agreementPhotoUrl"
                :path="form.agreementPhotoUrl" :fileType="['pdf']" :file-size="4" :limit="1"
                v-model="form.agreementPhotoImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="付款业务系统" prop="systemScreenshotImg">
              <YeePayFileUpload @input="handUploadImg" keys="systemScreenshotUrl" :file-size="5"
                :path="form.systemScreenshotUrl" :limit="1" v-model="form.systemScreenshotImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="代运营店铺协议" prop="pcPayImg">
              <YeePayFileUpload @input="handUploadImg" :fileType="['pdf']" type="pdf" keys="pcPayUrl" :file-size="5"
                :path="form.pcPayUrl" :limit="1" v-model="form.pcPayImg"></YeePayFileUpload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="法人姓名" prop="legalName">
              <el-input v-model="form.legalName" placeholder="请输入法人姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人邮箱" prop="contactEmail">
              <el-input v-model="form.contactEmail" placeholder="请输入联系人邮箱" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人手机号" prop="contactMobile">
              <code-input v-model="form.contactMobile" placeholder="请输入联系人手机号" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="法人证件号码" prop="legalLicenceNo">
          <code-input v-model="form.legalLicenceNo" placeholder="请输入法人证件号码" />
        </el-form-item>



        <template v-if="type === 2">
          <el-divider content-position="left">店铺信息</el-divider>
          <el-row>
            <el-col :span="8">
              <el-form-item label="店铺名称" prop="shortName">
                <name-input v-model="form.shortName" :maxlength="20" placeholder="请输入店铺名称" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="店铺类型" prop="channelType">
                <el-select v-model="form.channelType" placeholder="请选择店铺类型" clearable style="width: 100%">
                  <el-option label="抖音" value="DOUYIN" />
                </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="业务类型" prop="businessId">
                <el-select v-model="form.businessId" placeholder="请选择业务类型" clearable style="width: 100%">
                  <el-option label="到店餐饮" value="1" />
                  <el-option label="到综行业" value="4" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="店铺地址" prop="shopProvince">
                <el-cascader @change="shopAddressInfo" v-model="shopProvince" clearable :options="cityList"
                  :props="{ label: 'name', value: 'code' }" style="width: 100%;"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label="店铺详细地址" label-width="130px" prop="shopAddress">
                <el-input v-model="form.shopAddress" :maxlength="23" placeholder="请输入店铺详细地址	" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-divider content-position="left">协议</el-divider>
          <el-form-item label="数据处理确认书和扣款协议" prop="merQual">
            <YeePayFileUpload :fileType="['zip']" @input="handUploadImg" type="file" keys="merQualUrl" :file-size="4"
              :path="form.merQualUrl" :limit="1" v-model="form.merQual"></YeePayFileUpload>
            <el-link type="primary" href="/数据处理确认书（20250211）.docx">下载数据确认书模板</el-link>
          </el-form-item>
        </template>

      </el-form>
      <div class="footer-operation">
        <el-button @click="open = false">返回</el-button>
        <el-button :loading="loading" type="success" @click="submitForm" v-clickOnce>保存草稿</el-button>
        <el-button :loading="loading" type="primary" @click="submit" v-hasPermi="['ecs:yeePayWithholding:edit']"
          v-clickOnce>提交</el-button>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import { listShop } from '@/api/ecs/shop'
import YeePayFileUpload from '@/components/yeePayFileUpload/index.vue'
import { listYeePayIndustry } from '@/api/ecs/yeePayIndustry'
import { listYeePayCity } from '@/api/ecs/yeePayCity'
import { listYeePayBank } from '@/api/ecs/yeePayBank'
import {
  addYeePayWithholding,
  updateYeePayWithholding,
  incoming,
  getYeePayWithholding
} from '@/api/ecs/yeePayWithholding'
import { getUserProfile } from '@/api/system/user'
import { selectUnAgencyOperationsList, getAgent } from '@/api/ecs/agent'
import PayEaseFileUpload from '@/components/payEaseFileUpload/index.vue'
import { listAgencyOperations } from '@/api/ecs/agencyOperations'
import { ocrIdCard, ocrBankCard, ocrBusinessLicense } from '@/api/ecs/baiduOcr'

export default {
  name: "yeePayWithholdingOperate",
  components: { PayEaseFileUpload, YeePayFileUpload },
  props: {
    opens: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "蓝海银行"
    },
    type: {
      type: Number,
      default: 2
    },
    id: {
      type: Number,
    },
    agencyOperationsId: {

    }
  },
  data() {
    return {
      user: {},
      form: {
        id: null,
        ypwId: null,
        platformId: null,
        agentIds: null,
        childAgentId: null,
        agencyOperationsId: null,
        shopId: null,
        type: null,
        businessId: null,
        requestId: null,
        businessRole: null,
        parentMerchantNo: null,
        subMerchantNo: null,
        signType: null,
        licenceNo: null,
        licenceUrl: null,
        licenceImg: null,
        signName: null,
        shortName: null,
        openAccountLicenceUrl: null,
        openAccountLicenceImg: null,
        handLicenceUrl: null,
        handLicenceImg: null,
        legalName: null,
        channelType: null,
        legalLicenceType: null,
        legalLicenceNo: null,
        legalLicenceFrontUrl: null,
        legalLicenceFrontImg: null,
        legalLicenceBackUrl: null,
        legalLicenceBackImg: null,
        contactName: null,
        contactLicenceNo: null,
        contactMobile: null,
        contactEmail: null,
        servicePhone: null,
        adminMobile: null,
        settlementDirection: null,
        bankAccountType: null,
        bankCardNo: null,
        bankCode: null,
        province: null,
        city: null,
        district: null,
        address: null,
        shopProvince: null,
        shopCity: null,
        shopDistrict: null,
        productCode: null,
        rateType: null,
        primaryIndustryCategory: null,
        secondaryIndustryCategory: null,
        industryQualificationUrl: null,
        industryQualificationImg: null,
        status: null,
        fail: null,
        agreementSignUrl: null,
        feeRate: 0.00,
        delFlag: null,
        createTime: null,
        updateTime: null,
        merQual: null,
        merQualUrl: null,
        agreementPhotoUrl: null,
        agreementPhotoImg: null,
        systemScreenshotUrl: null,
        systemScreenshotImg: null,
        pcPayUrl: null,
        pcPayImg: null
      },
      open: false,
      industry: [],
      shopList: [],
      province: [],
      cityList: [],
      bankList: [],
      agentList: [],
      shopProvince: [],
      loading: false,
      industryList: [],
      isRefresh: false,
      agentLoading: false,
      bankNameLoading: false,
      rules: {
        shopId: [
          { required: true, message: "请选择店铺账户", trigger: "change" }
        ],
        agentIds: [
          { required: true, message: "请选择代运营账户", trigger: "change" }
        ],
        productCode: [
          { required: true, message: "请选择产品", trigger: "change" }
        ],

        signType: [
          { required: true, message: "请选择商户类型", trigger: "change" }
        ],
        licenceNo: [
          { required: true, message: "社会统一信用代码不能为空", trigger: "blur" }
        ],
        licenceImg: [
          { required: true, message: "请上传营业执照", trigger: "blur" }
        ],
        signName: [
          { required: true, message: "公司全称", trigger: "blur" }
        ],
        shortName: [
          { required: true, message: "店铺名称不能为空", trigger: "blur" }
        ],
        openAccountLicenceImg: [
          { required: true, message: "请上传开户许可证", trigger: ['change', "blur"] }
        ],
        channelType: [
          { required: true, message: "请选择店铺类型", trigger: ['change', "blur"] }
        ],
        merQual: [
          { required: true, message: "请上传数据处理确认书", trigger: ['change', "blur"] }
        ],
        legalName: [
          { required: true, message: "法人姓名不能为空", trigger: "blur" }
        ],
        legalLicenceNo: [
          { required: true, message: "法人证件号码不能为空", trigger: "blur" },
          { pattern: /^[1-9]\d{5}(19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[\dXx]$/, message: '法人身份号格式不正确', trigger: 'blur' }
        ],
        legalLicenceFrontImg: [
          { required: true, message: "请上传身份证正面", trigger: "blur" }
        ],
        legalLicenceBackImg: [
          { required: true, message: "请上传身份证反面", trigger: "blur" }
        ],
        contactMobile: [
          { required: true, message: "联系人手机号不能为空", trigger: "blur" },
          { pattern: /^1[3-9]\d{9}$/, message: '联系人手机号格式不正确', trigger: 'blur' }
        ],
        contactEmail: [
          { type: "email", message: "联系人邮箱格式错误", trigger: "blur" },
          { required: true, message: "联系人邮箱不能为空", trigger: "blur" }
        ],
        bankAccountType: [
          { required: true, message: "请选择结算类型", trigger: "change" }
        ],
        bankCardNo: [
          { required: true, message: "银行账户号码不能为空", trigger: "blur" }
        ],
        bankCode: [
          { required: true, message: "请选择银行", trigger: ["blur", "change"] }
        ],
        province: [
          { required: true, message: "请选择经营地址省市区", trigger: "change" }
        ],
        address: [
          { required: true, message: "经营详细地址不能为空", trigger: "blur" },
          { max: 30, message: "经营详细地址最大为30字符", trigger: "blur" }
        ],
        primaryIndustryCategory: [
          { required: true, message: "请选择业务分类", trigger: "change" }
        ],
        systemScreenshotImg: [
          { required: true, message: "请上传付款业务系统", trigger: ["change", "blur"] }
        ],
        agreementPhotoImg: [
          { required: true, message: "请上传付款业务协议", trigger: ["change", "blur"] }
        ],

        pcPayImg: [
          { required: true, message: "请上传代运营店铺协议", trigger: ["change", "blur"] }
        ],
        shopAddress: [
          { required: true, message: "店铺详细位置不能为空", trigger: "blur" }
        ],
        shopProvince: [
          { required: true, message: "请选择店铺地址省市区", trigger: "change" }
        ],
        businessId: [
          { required: true, message: "请选择业务类型", trigger: "change" }
        ],
      }
    }
  },
  created() {
    listShop({ page: 1, pageSize: 1000000 }).then(res => {
      this.shopList = res.rows
    })
    listYeePayIndustry().then(response => {
      this.industryList = this.handleTree(response.data, "code", "parentCode");
    })
    listYeePayCity().then(response => {
      this.cityList = this.handleTree(response.data, "code", "parentCode");
    })
  },
  methods: {
    industryCategoryInfo(val) {
      this.form.primaryIndustryCategory = val[0]
      this.form.secondaryIndustryCategory = val[1]
    },
    handUploadImg(val1, val2, val3) {
      this.form[val2] = val3

      if (!val1) return
      switch (val2) {
        case 'licenceUrl': // 营业执照
          ocrBusinessLicense({ url: val1 }).then((res) => {
            this.form.signName = res.data.words_result?.单位名称?.words ?? this.form.signName
            this.form.licenceNo = res.data.words_result?.社会信用代码?.words ?? this.form.licenceNo
            this.form.signType = ('个体工商户' == res.data.words_result?.类型?.words) ? 'INDIVIDUAL' : 'ENTERPRISE'
            this.form.address = res.data.words_result?.地址?.words ?? this.form.address
            const district = res.data.words_result?.证件编号?.words
            if (typeof district === 'string' && district.length > 6) {
              this.form.province = district.substring(0, 2) + '0000'
              this.form.city = district.substring(0, 4) + '00'
              this.form.district = district.substring(0, 6)
              this.province = [this.form.province, this.form.city, this.form.district]
            }
          })
          break
        case 'openAccountLicenceUrl': // 开户许可证
          if (this.form.signType == 'INDIVIDUAL') { // 个体工商户银行卡
            ocrBankCard({ url: val1 }).then((res) => {
              if (res.code == 200 && res.data.result?.bank_card_type != 0) { //可以识别
                this.form.bankAccountType = 'DEBIT_CARD'
                this.form.bankCardNo = res.data.result?.bank_card_number

                this.bankNameLoading = true
                listYeePayBank({ name: res.data.result?.bank_name }).then(response => {
                  this.bankList = response.data
                  this.bankList.forEach(item => {
                    if (item.name == res.data.result?.bank_name) {
                      this.form.bankCode = item.code
                    }
                  })
                  this.bankNameLoading = false
                }).catch(() => {
                  this.bankNameLoading = false
                })
              }
            })
          }
          break
        case 'legalLicenceFrontUrl':// 法人身份证人像面
          ocrIdCard({ url: val1, side: 'front' }).then((res) => {
            this.form.legalName = res.data.words_result?.姓名?.words ?? this.form.legalName
            this.form.legalLicenceNo = res.data.words_result?.公民身份号码?.words ?? this.form.legalLicenceNo
          })
          break
      }
    },
    businessAddressInfo(val) {
      this.form.province = val[0]
      this.form.city = val[1]
      this.form.district = val[2]
    },
    shopAddressInfo(val) {
      this.form.shopProvince = val[0]
      this.form.shopCity = val[1]
      this.form.shopDistrict = val[2]
    },
    agentRemoteMethod(query) {
      if (query !== '' && query !== null) {
        this.agentLoading = true
        if (this.type === 2) {
          listAgencyOperations({ userNickName: query, status: 5 }).then(response => {
            this.agentList = response.data

            this.agentLoading = false;
          }).catch(() => {
            this.agentLoading = false
          })
        } else {
          selectUnAgencyOperationsList({ userNickName: query }).then(response => {
            this.agentList = response.data

            this.agentLoading = false;
          }).catch(() => {
            this.agentLoading = false
          })
        }

      }
    },
    handleAgentChange(value) {
      const selectedItem = this.agentList.find(item => item.id === value);
      console.log('选中的项：', selectedItem);

      if (selectedItem.agentId > 0) {
        this.form.agentId = selectedItem.agentId
        this.form.childAgentId = selectedItem.id
      } else {
        this.form.agentId = selectedItem.id
      }
      this.form.platformId = selectedItem.platformId
      this.form.ypwId = selectedItem.ypwId
    },
    remoteMethod(query) {
      if (query !== '' && query !== null) {
        this.bankNameLoading = true
        listYeePayBank({ name: query }).then(response => {
          this.bankList = response.data
          this.bankNameLoading = false
        }).catch(() => {
          this.bankNameLoading = false
        })
      }
    },

    submitForm() {
      if (this.form.id != null) {
        updateYeePayWithholding(this.form).then(response => {
          this.$modal.msgSuccess("保存成功");
          this.open = false;
          this.isRefresh = true
          this.loading = false
        });
      } else {
        addYeePayWithholding(this.form).then(response => {
          this.$modal.msgSuccess("保存成功");
          this.open = false;
          this.isRefresh = true
          this.loading = false
        });
      }
    },
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.loading = true
          incoming(this.form).then(response => {
            this.$modal.msgSuccess("提交成功");
            this.open = false;
            this.loading = false
            this.isRefresh = true
          }).catch(() => {
            this.loading = false
          })
        }
      })
    },
    operateClose() {
      this.open = false
      this.$emit("handOperateVisible", false, this.isRefresh, {})
    },


  },
  watch: {
    opens: {
      handler(val) {
        this.open = val
        this.form.type = this.type
        if (this.type === 2) {
          getUserProfile().then(response => {
            this.user = response.data;
          });
        }
      },
      immediate: true,
    },
    id: {
      handler(val) {
        if (val) {
          this.loading = true
          getYeePayWithholding(val).then(response => {
            if (response.data) {
              let data = response.data;
              this.industry = [data.primaryIndustryCategory, data.secondaryIndustryCategory]
              this.province = [data.province, data.city, data.district]
              this.shopProvince = [data.shopProvince, data.shopCity, data.shopDistrict]
              // if (data.type === 1){
              if (data.childAgentId != null) {
                data.agentIds = data.childAgentId
                getAgent(data.agentIds).then(agentResponse => {
                  this.loading = false
                  this.agentList = [agentResponse.data];
                }).catch(() => {
                  this.loading = false
                })
              } else {
                data.agentIds = data.agentId
                getAgent(data.agentId).then(agentResponse => {
                  this.loading = false
                  this.agentList = [agentResponse.data];
                }).catch(() => {
                  this.loading = false
                })
              }
              // }else{
              //   this.loading = false
              // }
              this.form = data
              console.log(this.form.agentIds)

            }
          }).catch(() => {
            this.loading = false
          });
        }
      },
      immediate: true,
    }
  }

}

</script>
<style scoped lang="scss">
.form {
  padding-bottom: 80px;
}

.footer-operation {
  bottom: 0;
  width: 100%;
  height: 80px;
  display: flex;
  z-index: 10000;
  padding: 0 20px;
  text-align: center;
  position: absolute;
  align-items: center;
  background-color: #ffffff;
  border-top: 1px solid #EBEEF5;

  .el-button {
    width: 100%;
  }
}
</style>
